<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(favorite, index) in favorites" :key="favorite.favorite_id" :right-options="options" @click="delFavorite(favorite)" >
				<view class="msg-area-menu-item" :class="{'selecditem':favorite.favorite_id===selecFavoriteId}" @click="toChat(favorite)" @longpress="pressItem(favorite)">
					<view class="msg-area-item-content">
						<view class="msg-area-name-container">
							<view class="msg-area-name-container-name">
								<text>{{ favorite.name }}</text>
							</view>
							<view class="msg-area-name-container-dis">
								<text>离您：{{ formatDistance(favorite.location) }}</text>
							</view>
						</view>
						<view class="">
							<text class="msg-area-address-text">{{ favorite.address }}</text>
						</view>
					</view>

					<view class="msg-area-item-star">
						<uni-icons type="star-filled" size="20" color="#ffaa00" />
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
import { distance_m } from '../utils/distance';
import Favorite from '../utils/favoriteClass';
export default {
	name: 'favoriteBar',
	props: {
		favorites: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		storeData() {
			return this.$store.state.msg;
		}
	},
	data() {
		return {
			options: [{ text: '取消收藏', style: { backgroundColor: '#3c9cff' } }],
			favoriteManger: null,
			selecFavoriteId:''
		};
	},
	mounted() {
		this.favoriteManger = new Favorite(this.storeData.location, this.storeData);
	},
	methods: {
		async delFavorite(e) {
			const id = e.favorite_id;
		try {
				const res = await this.favoriteManger.remove(id);
				if (res.code) {
					const idx=this.favorites.findIndex(item=>item.favorite_id===id)
					if(idx===-1) return
					const newList=this.favorites.splice(idx,1)
					this.$emit('favorite.updata', newList);
					uni.showToast({
						title: '收藏已取消',
						position: 'center'
					});
				
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'fail'
					});
				}
			} catch (e) {
				uni.showToast({
					title: '取消收藏失败',
					icon: 'error'
				});
				console.error();
			}
		},
		pressItem(favorite){
			if(this.selecFavoriteId===favorite.favorite_id){
				this.selecFavoriteId=''
			}else{
					this.selecFavoriteId=favorite.favorite_id
			}
		
			this.$emit('pressItem',{type:"favorite",data:favorite})
		},
		formatDistance(loc1) {
			const loc2 = this.$store.state.msg.senderLocation;
			return distance_m(loc1, loc2);
		},
		toChat(favorite){
			if(this.selecFavoriteId===favorite.favorite_id){
				this.$emit('pressItem',favorite)
				return
			}
			this.$emit('toFavoriteChat',favorite)
		}
	}
};
</script>
<style lang="scss" scoped>
.msg-area-menu-item {
	width: 92%;
	padding: 20rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	border-bottom: 1px solid #f5f5f7;
	transition: background-color 0.2s ease;
}

/* 列表项hover效果 */
.msg-area-menu-item:active {
	background-color: #f5f5f7;
}

.msg-area-item-content {
	flex: 1;
	overflow: hidden;
}
.selecditem{
	background-color: #bcdfff;
}
.msg-area-name-container {
	display: flex;
	width: 100%;
	gap: 30rpx;
	margin-bottom: 8rpx;
	.msg-area-name-container-dis {
		width: 40%;
		font-size: 26rpx;
		color: #55aaff;
		align-self: flex-end;
	}
}

.msg-area-name-container-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.2;
    width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msg-area-address-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	/* #ifndef APP-PLUS-NVUE */
	white-space: nowrap;
	/* #endif */
}

.msg-area-item-star {
	margin-left: 16rpx;
	padding: 8rpx;
}

/* 适配u-swipe-action的滑动菜单样式 */
::v-deep .u-swipe-action {
	width: 100%;
}

::v-deep .u-swipe-action-item {
	width: 100%;
}

/* 滑动操作按钮样式（假设选项包含删除等操作） */
::v-deep .u-swipe-action__options {
	height: 100%;
}

::v-deep .u-swipe-action__option {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #ffffff;
}

/* 删除按钮样式 */
::v-deep .u-swipe-action__option--danger {
	background-color: #ff4d4f;
}
</style>
